import React from 'react'
import styles from './index.module.css'
import {NavBar, Icon, Toast} from 'antd-mobile'
import request from "../../utils/request";
import food1 from '../../assets/products/foot1.jpg'
import {withRouter, RouteComponentProps} from 'react-router-dom';


const Card: React.FC<{ item: product, history: any }> = ({item, history}) => {
    return (
        <div className={styles.box} onClick={() => {
            history.push(`/product/${item.id}`)
        }}>
            <img src={food1} alt="" className={styles.productProfile}/>
            <div className={styles.boxContent}>
                <div className={styles.boxTitle}>{item.name}</div>
                <b style={{
                    color: 'red'
                }}>¥{item.price}</b>
            </div>
        </div>
    );
};

interface Props extends RouteComponentProps {

}

interface product {
    id: number,
    name: string,
    sales: number
    image: string,
    price: number
}

interface category {
    id: number,
    name: string,
}

interface States {
    productList: product[],
    categoryList: category[],
    selectedCategoryId: number
}

class Index extends React.Component<Props, States> {

    state: States = {
        categoryList: [],
        productList: [],
        selectedCategoryId: 0
    };

    getProduct = async (categoryId: number) => {
        const result = await request('/product/get-by-category?categoryId=' + categoryId);
        const {data: {productList}} = result;
        this.setState({productList});
    };

    getCategoryAndProduct = async () => {
        const categoryResult = await request('/product/category-list');
        const {data: {categoryList}} = categoryResult;

        // const newCategoryList = categoryList.map((item, inx) => ({
        //     id: item.id,
        //     title: item.title,
        //     active: inx === 0
        // }));

        const [firstCategory] = categoryList;//array destructuring

        const productResult = await request('/product/get-by-category?categoryId=' + firstCategory.id);
        const {data: {productList}} = productResult;
        this.setState({
            categoryList,
            productList,
            selectedCategoryId: firstCategory.id
        });
    };

    sideClick = (categoryItem: category) => {
        const newCategoryList = this.state.categoryList.map((item) => ({
            ...item,
            active: item.id === categoryItem.id
        }));

        this.getProduct(categoryItem.id).catch(() => {
            Toast.fail('请求失败');
        });

        this.setState({
            categoryList: newCategoryList,
            selectedCategoryId: categoryItem.id
        });
    };

    componentDidMount() {
        this.getCategoryAndProduct().catch(() => {
            Toast.fail('请求失败');
        });
    }

    render() {
        const {history} = this.props;
        const {selectedCategoryId, categoryList, productList} = this.state;
        return (
            <div className={styles.container}>
                <NavBar
                    mode="dark"
                    rightContent={[
                        <Icon key="0" type="search" style={{marginRight: '16px'}}/>,
                    ]}
                    style={{backgroundColor: '#302F34'}}
                >商品分类</NavBar>
                <div className={styles.mainContent}>
                    <div className={styles.leftSide}>
                        <ul>
                            {
                                categoryList.map((item) => {
                                    return (
                                        <li key={item.id} onClick={() => {
                                            this.sideClick(item)
                                        }} className={item.id === selectedCategoryId ? styles.active : ''}>
                                            {item.name}
                                        </li>
                                    );
                                })
                            }
                        </ul>
                    </div>
                    <div className={styles.content}>
                        {
                            productList.map((item, inx) => (<Card key={inx} item={item} history={history}/>))
                        }
                    </div>
                </div>
            </div>
        );
    }
}


export default withRouter(Index)
